<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="page-title">小程序使用教程</view>
			<view class="page-subtitle">轻松上手，快速掌握各项功能</view>
		</view>

		<!-- 功能分类选项卡 -->
		<view class="tutorial-tabs">
			<view class="tabs-scroll">
				<view class="tab-item" :class="{ active: activeTab == tab.ids }" v-for="(tab, index) in tutorialTabs"
					:key="index" @click="activeTab = tab.ids">
					{{ tab.name }}
				</view>
			</view>
			<view class="tabs-scroll">
				<view class="tab-item" :class="{ active: activeTab ==  tab.ids  }" v-for="(tab, index) in tutorialTabs2"
					:key="index" @click="activeTab = tab.ids">
					{{ tab.name }}
				</view>
			</view>
		</view>

		<!-- 教程内容区域 -->
		<view class="tutorial-content">
			<!-- 登录教程 -->
			<view class="tutorial-section" v-show="activeTab == 0">
				<view class="section-title">
					<view class="title-icon">
						<icon class="iconfont icon-denglu"></icon>
					</view>
					<view class="title-text">登录教程</view>
				</view>
				<view class="section-content">
					<view class="tutorial-step">
						<view class="step-number">1</view>
						<view class="step-content">
							<view class="step-title">打开小程序</view>
							<view class="step-description">在微信中搜索“字影工坊”并点击进入我们的小程序，或者扫描二维码进入</view>
							<view class="step-image" @click="lookimgfn(5)">
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/5.png"></image>
								<!-- 登录步骤1图片位置 -->
								<!-- <view class="image-placeholder">登录步骤1图片</view> -->
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">2</view>
						<view class="step-content">
							<view class="step-title">授权登录</view>
							<view class="step-description">点击底部导航栏“我的”->“点击登录”按钮进行小程序的登录</view>
							<view class="step-image" @click="lookimgfn(6)">
								<!-- 登录步骤2图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/6.png"></image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">3</view>
						<view class="step-content">
							<view class="step-title">登录成功</view>
							<view class="step-description">登录成功后，自动显示用户的用户名，手机号以及用户积分</view>
							<view class="step-image" @click="lookimgfn(7)">
								<!-- 登录步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/7.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 编辑个人资料教程 -->
			<view class="tutorial-section" v-show="activeTab == 1">
				<view class="section-title">
					<view class="title-icon">
						<icon class="iconfont icon-gerenzhongxin"></icon>
					</view>
					<view class="title-text">编辑个人资料教程</view>
				</view>
				<view class="section-content">
					<view class="tutorial-step">
						<view class="step-number">1</view>
						<view class="step-content">
							<view class="step-title">进入我的</view>
							<view class="step-description">点击顶部个人信息模块中的编辑资料</view>
							<view class="step-image" @click="lookimgfn(8)">
								<!-- 个人资料步骤1图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/8.png"></image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">2</view>
						<view class="step-content">
							<view class="step-title">编辑资料</view>
							<view class="step-description">点击头像进行头像选择，同时可修改用户名和手机号</view>
							<view class="step-image" @click="lookimgfn(9)">
								<!-- 个人资料步骤2图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/9.png"></image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">3</view>
						<view class="step-content">
							<view class="step-title">保存修改</view>
							<view class="step-description">修改头像、昵称等信息后，点击"保存"按钮完成编辑</view>
							<view class="step-image" @click="lookimgfn(10)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/10.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 积分充值教程 -->
			<view class="tutorial-section" v-show="activeTab == 2">
				<view class="section-title">
					<view class="title-icon">
						<icon class="iconfont icon-jifen"></icon>
					</view>
					<view class="title-text">积分充值教程</view>
				</view>
				<view class="section-content">
					<view class="tutorial-step">
						<view class="step-number">1</view>
						<view class="step-content">
							<view class="step-title">进入积分页面</view>
							<view class="step-description">在我的点击我的积分中的“立即充值按钮”进入积分充值管理页面</view>
							<view class="step-image" @click="lookimgfn(11)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/11.png"></image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">2</view>
						<view class="step-content">
							<view class="step-title">选择充值金额</view>
							<view class="step-description">选择您需要充值的积分套餐，点击"立即充值"</view>
							<view class="step-image" @click="lookimgfn(12)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/12.png"></image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">3</view>
						<view class="step-content">
							<view class="step-title">完成支付</view>
							<view class="step-description">选择支付方式，完成支付流程，积分即时到账</view>

						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">4</view>
						<view class="step-content">
							<view class="step-title">查看积分</view>
							<view class="step-description">通过我的页面，我的积分模块，查看当前积分情况</view>

						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">5</view>
						<view class="step-content">
							<view class="step-title">积分消费记录</view>
							<view class="step-description">通过我的页面，点击我的积分模块中的“消费记录”按钮可跳转到消费记录列表页面</view>
							<view class="step-image" @click="lookimgfn(13)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/13.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">6</view>
						<view class="step-content">
							<view class="step-title">查看积分消费记录</view>
							<view class="step-description">积分消费记录展示积分充值和积分使用情况，可根据类型和时间进行搜索</view>
							<view class="step-image" @click="lookimgfn(14)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/14.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 视频生成数字人教程 -->
			<view class="tutorial-section" v-show="activeTab == 3">
				<view class="section-title">
					<view class="title-icon">
						<icon class="iconfont icon-shipin"></icon>
					</view>
					<view class="title-text">视频生成数字人教程</view>
				</view>
				<view class="section-content">
					<view class="tutorial-step">
						<view class="step-number">1</view>
						<view class="step-content">
							<view class="step-title">选择视频素材</view>
							<view class="step-description">点击"上传视频"按钮，从相册选择或拍摄视频素材</view>
							<view class="step-image">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 50%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/15.png" @click="lookimgfn(15)">
								</image>

								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/24.png" @click="lookimgfn(24)">
								</image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">2</view>
						<view class="step-content">
							<view class="step-title">音色选择/上传</view>
							<view class="step-description">选择数字人系统音色参数或上传自定义音色</view>
							<view class="step-title" style="font-size:27rpx;">系统音色</view>
							<view class="step-description">通过系统提供的音色列表点击选择系统音色</view>
							<view class="step-image" @click="lookimgfn(23)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/23.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number" style="background-color: transparent;"></view>
						<view class="step-content">
							<view class="step-title" style="font-size:27rpx;">自定义音色</view>
							<view class="step-description">通过选择自定义音色模块，点击上传音色按钮，通过语音录入匀速读出指定模板文字进行音色录入</view>
							<view class="step-image" @click="lookimgfn(16)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/16.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number" style="background-color: transparent;"></view>
						<view class="step-content">
							<view class="step-title" style="font-size:27rpx;">历史音色</view>
							<view class="step-description">通过选择自定义音色模块，点击我的自定义音色，通过弹窗展示历史音色，通过音色左边的单选框勾选点击确定按钮进行选择
							</view>

						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">3</view>
						<view class="step-content">
							<view class="step-title">数字人视频合成文本</view>
							<view class="step-description">
								文本可以自定义输入文本，也可以通过AI模型生成</view>
							<view class="step-title" style="font-size: 27rpx;">自定义输入文本</view>

							<view class="step-description">
								通过在输入框中输入文本内容来生成数字人</view>
							<view class="step-image" @click="lookimgfn(25)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/25.png"></image>
							</view>
							<view class="step-title" style="font-size: 27rpx;margin-top: 20px;">AI模型生成文本</view>
							<view class="step-description">
								在输入数字人文字是可使用AI生成，点击AI生成输入问题需求，等待AI回答，回答完毕后点击回答下方的“引用”按钮进行引用，可在输入框中对文本进行修改</view>
							<view class="step-image" @click="lookimgfn(19)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/19.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">4</view>
						<view class="step-content">
							<view class="step-title">数字人生成</view>
							<view class="step-description">点击“确认”按钮，进行数字人生成</view>

						</view>
					</view>
				</view>
			</view>

			<!-- 图片生成数字人教程 -->
			<view class="tutorial-section" v-show="activeTab == 4">
				<view class="section-title">
					<view class="title-icon">
						<icon class="iconfont icon-tupian"></icon>
					</view>
					<view class="title-text">图片生成数字人教程</view>
				</view>
				<view class="section-content">
					<view class="tutorial-step">
						<view class="step-number">1</view>
						<view class="step-content">
							<view class="step-title">上传图片</view>
							<view class="step-description">点击"选择图片"按钮，从相册选择或拍摄照片作为素材</view>
							<view class="step-image">
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/15.png" @click="lookimgfn(15)">
								</image>

								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/22.png" @click="lookimgfn(22)">
								</image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">2</view>
						<view class="step-content">
							<view class="step-title">音色选择/上传</view>
							<view class="step-description">选择数字人系统音色参数或上传自定义音色</view>
							<view class="step-title" style="font-size:27rpx;">系统音色</view>
							<view class="step-description">通过系统提供的音色列表点击选择系统音色</view>
							<view class="step-image" @click="lookimgfn(23)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/23.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number" style="background-color: transparent;"></view>
						<view class="step-content">
							<view class="step-title" style="font-size:27rpx;">自定义音色</view>
							<view class="step-description">通过选择自定义音色模块，点击上传音色按钮，通过语音录入匀速读出指定模板文字进行音色录入</view>
							<view class="step-image" @click="lookimgfn(16)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/16.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number" style="background-color: transparent;"></view>
						<view class="step-content">
							<view class="step-title" style="font-size:27rpx;">历史音色</view>
							<view class="step-description">通过选择自定义音色模块，点击我的自定义音色，通过弹窗展示历史音色，通过音色左边的单选框勾选点击确定按钮进行选择
							</view>

						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">3</view>
						<view class="step-content">
							<view class="step-title">自定义图片背景</view>
							<view class="step-description">上传图片背景图，可智能修改原图片的人物背景，上传背景图后，请等待图片合成成功之后，在进行数字人视频生成</view>
							<view class="step-image" @click="lookimgfn(17)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/17.png"></image>
							</view>
						</view>
					</view>
					<view class="tutorial-step">
						<view class="step-number">4</view>
						<view class="step-content">
							<view class="step-title">数字人视频合成文本</view>
							<view class="step-description">
								文本可以自定义输入文本，也可以通过AI模型生成</view>
							<view class="step-title" style="font-size: 27rpx;">自定义输入文本</view>

							<view class="step-description">
								通过在输入框中输入文本内容来生成数字人</view>
							<view class="step-image" @click="lookimgfn(25)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/25.png"></image>
							</view>
							<view class="step-title" style="font-size: 27rpx;margin-top: 20px;">AI模型生成文本</view>
							<view class="step-description">
								在输入数字人文字是可使用AI生成，点击AI生成输入问题需求，等待AI回答，回答完毕后点击回答下方的“引用”按钮进行引用，可在输入框中对文本进行修改</view>
							<view class="step-image" @click="lookimgfn(19)">
								<!-- 个人资料步骤3图片位置 -->
								<image style="width: 100%; height: 250rpx;" mode='aspectFit'
									src="https://ivu06wjqra.dy.takin.cc/human/process/19.png"></image>
							</view>
						</view>
					</view>

					<view class="tutorial-step">
						<view class="step-number">5</view>
						<view class="step-content">
							<view class="step-title">生成视频</view>
							<view class="step-description">点击“确认”按钮，进行数字人生成</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 视频生成列表和进度 -->
			<view class="tutorial-section" v-show="activeTab == 5">
				<view class="section-title">
					<view class="title-icon">
						<icon class="iconfont icon-liebiao"></icon>
					</view>
					<view class="title-text">视频生成管理</view>
				</view>

				<!-- 生成进度列表 -->
				<view class="progress-list">
					<view class="progress-title">生成进度</view>
					<view class="step-image" @click="lookimgfn(21)">
						<!-- 个人资料步骤3图片位置 -->
						<image style="width: 100%; height: 250rpx;" mode='aspectFit'
							src="https://ivu06wjqra.dy.takin.cc/human/process/21.png"></image>
					</view>
				</view>

				<!-- 已完成视频列表 -->
				<view class="video-list">
					<view class="video-list-title">已完成视频</view>
					<view class="step-image" @click="lookimgfn(18)">
						<!-- 个人资料步骤3图片位置 -->
						<image style="width: 100%; height: 250rpx;" mode='aspectFit'
							src="https://ivu06wjqra.dy.takin.cc/human/process/18.png"></image>
					</view>
					<view class="video-list-title" style="margin-top: 10px;">下载视频</view>
					<view class="step-image" @click="lookimgfn(20)">
						<!-- 个人资料步骤3图片位置 -->
						<image style="width: 100%; height: 250rpx;" mode='aspectFit'
							src="https://ivu06wjqra.dy.takin.cc/human/process/20.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tutorialTabs: [{
						name: '登录教程',
						id: 'login',
						ids:0,
					},
					{
						name: '个人资料',
						id: 'profile',
						ids:1,
					},
					{
						name: '积分充值',
						id: 'points',
						ids:2,
					},
					
				],
				tutorialTabs2: [
					{
						name: '视频数字人',
						id: 'videoAvatar',
						ids:3,
					},
					{
						name: '图片数字人',
						id: 'imageAvatar',
						ids:4,
					},
					{
						name: '生成管理',
						id: 'manage',
						ids:5,
					}
				],
				progressList: [{
						id: 1,
						name: '产品介绍视频',
						progress: 68,
						status: '生成中',
						timeLeft: '预计剩余2分钟'
					},
					{
						id: 2,
						name: '企业宣传数字人',
						progress: 100,
						status: '已完成',
						timeLeft: '0分钟'
					},
					{
						id: 3,
						name: '教育培训内容',
						progress: 35,
						status: '排队中',
						timeLeft: '预计剩余5分钟'
					}
				],
				videoList: [{
						id: 1,
						title: '企业品牌介绍',
						type: '视频数字人',
						duration: '01:25',
						createTime: '2024-01-15 14:30'
					},
					{
						id: 2,
						title: '产品功能讲解',
						type: '图片数字人',
						duration: '02:10',
						createTime: '2024-01-14 10:15'
					},
					{
						id: 3,
						title: '营销活动宣传',
						type: '视频数字人',
						duration: '00:45',
						createTime: '2024-01-13 16:45'
					}
				]
			}
		},
		onLoad(query) {
			const obj = decodeURIComponent(query.type)
			console.log(obj);
			this.activeTab = obj == 'undefined' ? 0 : obj

		},
		methods: {
			downloadVideo(index) {
				uni.showToast({
					title: '开始下载视频',
					icon: 'success'
				})
				// 这里可以添加实际的下载逻辑
			},
			lookimgfn(e) {
				const img = e ? `https://ivu06wjqra.dy.takin.cc/human/process/${e}.png` : ''
				if (img) {
					uni.previewImage({
						urls: [img]
					})
				}
			},
		}
	}
</script>

<style scoped>
	/* 整体容器样式 */
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 页面头部样式 */
	.page-header {
		text-align: center;
		margin-bottom: 30rpx;
		padding: 30rpx 0;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
	}

	.page-subtitle {
		font-size: 24rpx;
		color: #888;
	}

	/* 选项卡样式 */
	.tutorial-tabs {
		margin-bottom: 30rpx;
	}

	.tabs-scroll {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		/* padding-bottom: 20rpx; */
	
	}

	/* 为各种平台添加滚动条隐藏样式 */
	.tabs-scroll::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.tabs-scroll {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.tab-item {
		display: inline-block;
		padding: 15rpx 25rpx;
		/* margin-right: 20rpx; */
		text-align: center;
		width: 80px;
		margin-bottom: 10px;
		font-size: 28rpx;
		color: #666;
		border-radius: 40rpx;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.tab-item.active {
		color: #fff;
		background-color: #f97316;
		box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
	}

	/* 教程部分样式 */
	.tutorial-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.title-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9731615;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.title-icon .iconfont {
		font-size: 40rpx;
		color: #f97316;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	/* 步骤样式 */
	.tutorial-step {
		display: flex;
		margin-bottom: 40rpx;
	}

	.tutorial-step:last-child {
		margin-bottom: 0;
	}

	.step-number {
		width: 60rpx;
		height: 60rpx;
		background-color: #f97316;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.step-content {
		flex: 1;
	}

	.step-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
	}

	.step-description {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	/* 图片占位样式 */
	.step-image,
	.video-thumbnail {
		width: 100%;
		height: 300rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #e0e0e0;
	}

	.image-placeholder,
	.video-placeholder {
		font-size: 28rpx;
		color: #999;
		text-align: center;
	}

	/* 进度列表样式 */
	.progress-list {
		margin-bottom: 40rpx;
	}

	.progress-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}

	.progress-item {
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.progress-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.progress-status {
		font-size: 24rpx;
		color: #f97316;
		padding: 4rpx 16rpx;
		background-color: #f9731615;
		border-radius: 40rpx;
	}

	.progress-bar {
		width: 100%;
		height: 10rpx;
		background-color: #e0e0e0;
		border-radius: 5rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #f97316, #fdba74);
		transition: width 0.3s ease;
	}

	.progress-info {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		color: #888;
	}

	/* 视频列表样式 */
	.video-list {
		margin-top: 20rpx;
	}

	.video-list-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}

	.video-item {
		display: flex;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.video-thumbnail {
		width: 200rpx;
		height: 150rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.video-duration {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}

	.video-info {
		flex: 1;
	}

	.video-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.video-meta {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.video-type {
		font-size: 20rpx;
		color: #f97316;
		padding: 4rpx 12rpx;
		background-color: #f9731615;
		border-radius: 8rpx;
	}

	.video-date {
		font-size: 20rpx;
		color: #999;
	}

	.video-action {
		margin-left: 20rpx;
	}

	/* 禁止手动调整文本框大小 */
	::-webkit-scrollbar {
		width: 0px !important;
		height: 0px !important;
		/* 滚动条的宽度 */
	}

	.download-btn {
		font-size: 26rpx;
		color: #f97316;
		padding: 10rpx 30rpx;
		border: 1px solid #f97316;
		border-radius: 40rpx;
		transition: all 0.3s ease;
	}

	.download-btn:active {
		background-color: #f97316;
		color: #fff;
	}

	/* 响应式设计 */
	@media screen and (max-width: 320px) {
		.step-number {
			width: 50rpx;
			height: 50rpx;
			font-size: 28rpx;
		}

		.step-image {
			height: 250rpx;
		}

		.video-thumbnail {
			width: 180rpx;
			height: 130rpx;
		}
	}
</style>